<template>
  <div class="page-container">
    <div class="heder-box">
      <div class="header-left">
        <el-button class="btn" @click="goBack()">返回</el-button>
      </div>
      <div class="header-center">数字管理化平台</div>
      <div class="header-right">
        <el-button class="btn">生成项目</el-button>
      </div>
    </div>
    <div class="page-main">
      <div class="main-left">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expand-all="true"
          class="main-left-tree"
        ></el-tree>
      </div>
      <div class="main-center">
        <div class="img-box">
          <img src="../../assets/demo.png" alt="" srcset="" />
        </div>
        <div class="img-nav-box" ref="navBox">
          <div
            class="template-box"
            ref="temBox"
            :style="{ width: 20 * 200 + 'px' }"
          >
            <i class="el-icon-arrow-left arrow-left" @click="leftArrow"></i>
            <div
              class="template-item"
              :class="active == index ? 'active-template' : ''"
              v-for="(ele, index) in 10"
              :key="ele"
            >
              {{ ele }}
            </div>
            <i class="el-icon-arrow-right arrow-right" @click="rightArrow"></i>
          </div>
        </div>
      </div>
      <div class="main-right">
        <div class="main-right-title">模板介绍</div>
        <div class="template-msg">
          <p>页面数量：92页</p>
          <p>素材版本：V1.0</p>
          <p>收费类型：免费素材</p>
          <p>更新时间：2022-09-05</p>
          <p>创建时间：2022-09-05</p>
          <p>版权信息：用户上传</p>
          <p>行业：制造业</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      left_w: 0,
      leftsize: "",
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    leftArrow() {
      if (this.active > 0) {
        this.active--;
        let clientNum = Math.floor(this.$refs.navBox.clientWidth / 200);
        if (this.left_w < 0) {
          this.left_w += 200;
          this.leftsize = this.left_w + "px";
          this.$refs.temBox.style.marginLeft = this.leftsize;
        }
      }
    },
    rightArrow() {
      if (this.active <= 8) {
        this.active++;
        let clientNum = this.$refs.navBox.clientWidth / 200;
        if (this.active + 1 > clientNum) {
          this.left_w -= 200;
          this.leftsize = this.left_w + "px";
          this.$refs.temBox.style.marginLeft = this.leftsize;
        }
      }
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep {
  .el-tree-node__content:hover,
  .el-upload-list__item:hover {
    background: var(--tree-select-bg);
  }
}
.heder-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  border-bottom: 1px solid var(--border-color);
  padding: 0 30px;
  background: var(--background);
  .header-center {
    color: var(--font-color);
    text-align: center;
  }
  .btn {
    background: var(--button-bg);
    color: var(--button-color);
  }
}
.page-container {
  width: 100%;
  height: 100vh;
  .page-main {
    width: 100%;
    height: calc(100vh - 48px);
    padding: 16px 0;
    background: var(--background);
    display: flex;
    .main-left,
    .main-right {
      width: 15%;
    }
    .main-center {
      width: 70%;
      padding: 0 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .img-box {
        width: 100%;
        height: 70%;
        border: 1px solid #000;
        border-radius: 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 30px;
        }
      }
      .img-nav-box {
        width: 100%;
        height: 20%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        .arrow-left,
        .arrow-right {
          font-size: 30px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
        }
        .arrow-left {
          left: 0;
        }
        .arrow-right {
          right: 0;
        }
        .template-box {
          height: 100%;
          .template-item {
            float: left;
            width: 200px;
            height: 100%;
            margin-right: 10px;
            background: burlywood;
          }
          .active-template {
            border: 1px solid red;
          }
        }
      }
    }
    .main-left {
      height: 100%;
      overflow-y: scroll;
      .main-left-tree {
        color: var(--font-color);
        background: var(--background);
      }
    }
    .main-left::-webkit-scrollbar {
      display: none;
    }
    .main-right {
      color: var(--font-color);
      background: var(--background);
      font-size: 12px;
      .main-right-title {
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-bottom: 1px solid var(--border-color);
      }
      .template-msg {
        padding-top: 10px;
        p {
          margin: 5px 0;
        }
      }
    }
  }
}
</style>